<template>
  <div class="right_center">
    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
  </div>
</template>

<script>
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {}
    };
  },
  props: {},
  watch: {
    "$store.state.setting.lastSEIASData.decarbonModel.fuelSolu": {
      deep: true,
      handler(newValue, oldValue) {
        this.getData(newValue);
      }
    }
  },
  mounted() {
    this.getData(
      this.$store.state.setting.lastSEIASData.decarbonModel.fuelSolu
    );
  },
  methods: {
    getData(newValue) {
      let res = {};
      res.fuelSolu = newValue;
      res.fuelEUs = this.$store.state.setting.lastSEIASData.fuelEUs;
      res.category = this.$store.state.setting.lastSEIASData.selectOptions.deliveryYear;
      this.init(res);
    },
    init(newData) {
      let fuels = [
        ...new Set([...newData.fuelSolu.mainFuel, ...newData.fuelSolu.dualFuel])
      ].filter(v => v !== "None");

      let series = fuels.map((fuel, index) => {
        let ft = newData.fuelEUs.find(e => e.Fuel == fuel);
        let color = !ft
          ? "#FFFFFF"
          : ft.FuelType === "regular"
          ? "#ED7D3D"
          : ft.FuelType === "fossil"
          ? "#7F7F7F"
          : "#70AD47";
        return {
          name: fuel,
          type: "bar",
          stack: "fuel",
          label: {
            show: true,
            color: "#FFF"
          },
          barGap: "-100%",
          barWidth: 10,
          itemStyle: {
            borderRadius: 5,
            color: color
          },
          z: -12,
          data: new Array(newData.category.length).fill(0)
        };
      });
      
      for (let index = 0; index < newData.category.length; index++) {
        let mainFuel = newData.fuelSolu.mainFuel[index];
        let mainRatio = newData.fuelSolu.mainRatio[index];
        let dualFuel = newData.fuelSolu.dualFuel[index];
        let dualRatio = newData.fuelSolu.dualRatio[index];
        mainFuel !== "None"
          ? (series.find(e => e.name == mainFuel).data[index] = mainRatio)
          : "";
        dualFuel !== "None"
          ? (series.find(e => e.name == dualFuel).data[index] = dualRatio)
          : "";
      }

      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          },
          formatter: function(params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function(item) {
              result +=
                item.marker +
                " " +
                item.seriesName +
                " : " +
                Number(item.value).toFixed(1) +
                "</br>";
            });
            return result;
          }
        },
        legend: {
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0"
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "30px",
          top: "20px"
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: "#606060"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: series
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.right_center {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
